<template>
    <div class="AllContactInfoChecked">
        <el-card class="box-card">
            <div slot="headerss" class="clearfix text_fl">
                <span>查询服务类-->联系人信息查询</span>
                <el-button style="float:right;padding:3px 0;" type="text" @click="resetForm">关闭</el-button>
            </div>
            <div>
                <!-- <el-form ref="formData" :model="formData" label-width="150px">
                        <el-row>
                            <el-col :span="7">
                                <div class="text_center width30">
                                    <el-form-item label="证件类型:" class="text_fl">
                                        <span>{{formData.KEYTYPE|filterKeytype(KeytypeOption)}}</span>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="7">
                                <div class="text_center width30">
                                    <el-form-item label="证件号:" class="text_fl">
                                        <span>{{formData.CUSTID}}</span>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="7" :offset="1">
                                <div class="text_center width30">
                                    <el-form-item label="客户姓名:" class="text_fl">
                                        <span>{{formData.NAME}}</span>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                </el-form>-->
                <!-- <div class="box-group businessIndex">
                    <div class="tab-header">
                        <div class="headerTitles text_center">客户基本信息</div>
                    </div>
                    <div class="content">
                        <el-row>
                            <el-col :span="8">
                                <p>
                                    <span>证件类型:</span>
                                    {{formData.KEYTYPE|filterKeytype(KeytypeOption)}}
                                </p>
                            </el-col>
                            <el-col :span="8">
                                <p>
                                    <span>证件号码：</span>
                                    {{formData.CUSTID}}
                                </p>
                            </el-col>
                            <el-col :span="8">
                                <p>
                                    <span>客户姓名:</span>
                                    {{formData.NAME}}
                                </p>
                            </el-col>
                        </el-row>
                    </div>
                </div>-->
                <template>
                    <el-table
                        :data="clientContact"
                        border
                        style="width:98%;"
                        class="heard-bg business_table"
                    >
                        <el-table-column label="联系人姓名">
                            <template slot-scope="scope">
                                <span>{{scope.row.NAME1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="MOBILE1" label="联系人手机"></el-table-column>

                        <el-table-column label="联系人与申请人关系">
                            <template slot-scope="scope">
                                <span>{{scope.row.RELO1|filterRel01(RELO1Option)}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="RELFLAG" label="是否直系亲属">
                            <template slot-scope="scope">
                                <span>{{scope.row.FLAG1==="1"?'是':'否'}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                    @click.native.prevent="revamp(scope.$index,scope.row)"
                                    type="text"
                                >修改</el-button>
                                <el-button
                                    @click.native.prevent="deleteRow(scope.$index,scope.row)"
                                    type="text"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
                <div class="footer">
                    <el-button
                        size="small"
                        @click.native.prevent="addContanctInfo"
                        type="primary"
                    >添加联系人</el-button>
                    <el-button type="primary" size="small" @click="handleClickbtn">修改记录查询</el-button>
                </div>
            </div>
            <!-- 展示 -->
            <allContaact-info-item
                ref="DialogFroms"
                :ContactsQueryInfo="ContactsQueryOne"
                :RELO1Option="RELO1Option"
                :disabledValue="disabledValue"
                :isAddInfo="isAddInfo"
                @childHanderAllContaactInfoItem="childHanderAllContaactInfoItem"
            ></allContaact-info-item>
        </el-card>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import AllContaactInfoItem from './childItem/AllContaactInfoItem.vue';
import { getDictSelectList, closePage, getBusinessMenuId } from '@/utils/Common';
import { setNumber, ChangePage } from '@/utils/Object';

export default {
    name: 'AllContactInfoChecked',
    data() {
        return {
            formData: {
                NAME: '', // 客户姓名
                KEYTYPE: '', // 证件类型
                CUSTID: '', // 证件号
                INQOPT: '2', // 查询方式
            },
            KeytypeOption: [],
            clientContact: [], // 3064联系人信息查询得到的数据
            ContactsQueryOne: {
                NAME: '',
                CUSTRNBR: '',
                CONCOMP: '',
                AREA: '',
                TEL: '',
                EXT: '',
                MOBILE: '',
                REL: '',
                RELFLAG: '',
            }, // 4081联系人信息维护和查询
            showDialogFrom: false,
            isAddInfo: false, // 添加按钮
            disabledValue: true, // disabled 属性不生效
            defaultParams: this.$store.getters.defaultParams || '', // 更新报文
            RELO1Option: [], // 联系人与申请人关系 数组
            RTNIND: '', // 是否翻页标志
            pagingDataList: [], // (只存每页最后一条记录)
            nextButtonFlag: false, // ‘下一页’  按钮的显示控制阀
            AUTHDATE_flag: '', // 翻页控制使用；首次查询上送空；翻页查询时上送 上页 返回的最后一条记录 授权日期；
            PURTIME_flag: '', // 翻页控制使用；首次查询上送空；翻页查询时上送 上页 返回的最后一条记录 授权时间；
            currentPageIndex: 0, // 当前页最后一条记录的的索引
            NAME1: '',
            TEL1: '',
            MOBILE1: '',
            ContactsInfo: {// 联系人信息
                OPTION: '0', // 操作选项 0或空：查询1:新增 2：修改 3：删除
                NAME: '', // 姓名 必填
                CUSTRNBR: '', // 联系人证件号码 操作选项为0-查询时，不填写
                CONCOMP: '', // 联系人单位 操作选项为0-查询时，不填写
                AREA: '', // 联系人电话区号
            },
            MenuId: '',
        };
    },
    components: {
        AllContaactInfoItem,
    },
    computed: {
        ...mapGetters([
            'cardInfo_3004',
            'businessMenu',
        ]),

    },

    filters: {
        filterKeytype: (value, KeytypeOption) => {
            for (let index = 0; index < KeytypeOption.length; index++) {
                const element = KeytypeOption[index];
                if (element.code === value) {
                    return element.label;
                }
            }
        },
        filterRel01: (value, RELO1Option) => {
            value = (`${value}`).trim();
            for (let index = 0; index < RELO1Option.length; index++) {
                const element = RELO1Option[index];
                if (element.code === value) {
                    return element.label;
                }
            }
        },
    },
    mounted() {
        this.getConfigInfo();
    },
    methods: {
        async getConfigInfo() {
            this.formData.NAME = this.cardInfo_3004.NAME;
            this.formData.KEYTYPE = this.cardInfo_3004.KEYTYPE;
            this.formData.CUSTID = this.cardInfo_3004.CUSTID;
            this.ContactsQueryOne.CUSTID = this.formData.CUSTID;// 证件号码，
            this.ContactsQueryOne.KEYTYPE = this.formData.KEYTYPE;// 证件类型
            this.KeytypeOption = await getDictSelectList('IDTYPE', this);
            this.RELO1Option = await getDictSelectList('CNREL', this);
            await this.getContactInfo();
        },
        // 修改
        async revamp(value, row) {
            this.disabledValue = false;
            await this.getContactsQueryInfo(row.NAME1, '0');
            this.isAddInfo = false;

            this.$refs.DialogFroms.showDialogFrom = true;
        },
        // 删除
        deleteRow(value, row) {
            this.$confirm('确定是否删除当前数据', '删除提示', {
                customClass: 'warning', type: 'warning',
            }).then(() => {
                this.getContactsQueryInfo(row.NAME1, '3');
            });
        },
        // 添加联系人信息
        addContanctInfo() {
            this.disabledValue = false;
            this.isAddInfo = true;
            // 数据清空
            this.ContactsQueryOne.NAME = '';
            this.ContactsQueryOne.CUSTRNBR = '';
            this.ContactsQueryOne.CONCOMP = '';
            this.ContactsQueryOne.AREA = '';
            this.ContactsQueryOne.TEL = '';
            this.ContactsQueryOne.EXT = '';
            this.ContactsQueryOne.MOBILE = '';
            this.ContactsQueryOne.REL = '';
            this.ContactsQueryOne.RELFLAG = '';
            this.$refs.DialogFroms.showDialogFrom = true;
        },
        // 点击名称
        async showContactInfo(name) {
            name = (`${name}`).trim();
            console.log(name, 'name');
            this.disabledValue = true;
            this.isAddInfo = false;
            await this.getContactsQueryInfo(name, '0');
            // 打开信息框
            this.$refs.DialogFroms.showDialogFrom = true;
        },
        // 3064联系人信息查询
        async getContactInfo(isrtnind, names, tels, mobiles) {
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '3064';// 修改交易号
            defaultParams.body.appBody = {
                PINFLAG: '0',
                PIN: '',
                RTNIND: isrtnind || '',// 翻页标志
                INQOPT: this.formData.INQOPT,
                CUSTID: this.formData.CUSTID,// 证件号码，
                KEYTYPE: this.formData.KEYTYPE,// 证件类型
                NAME: names || '',//
                TEL: tels || '',//
                MOBILE: mobiles || '',//
            };
            let tabledataInfo;
            await this.$post.common.transPort(defaultParams).then((res) => {
                console.log(res);
                const tabledatas = JSON.parse(res.data.jsonRes);
                if (res.status === 200) { // 请求成功
                    console.log(tabledatas, '3064');
                    if (tabledatas.sysHead.rspCd == '000000') { // 交易成功
                        tabledataInfo = tabledatas.body.appBody.dataList;
                        this.clientContact = tabledataInfo;
                        this.RTNIND = tabledatas.body.appBody.RTNIND;
                        // 翻页设置
                        //  console.log(this.clientContact,'this.clientContact')
                        ChangePage(this, ['NAME1', 'TEL1', 'MOBILE1'], 'clientContact', 10);
                    }
                }
            });
        },
        // 4081联系人信息维护和查询
        getContactsQueryInfo(name, Options) {
            const defaultParaminfo = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParaminfo.body.appHead.tranCode = '4081';// 修改交易号
            defaultParaminfo.body.appBody = {
                PINFLAG: '0',
                PIN: '',
                OPTION: Options,// 操作选项
                NAME: name,
                CUSTID: this.formData.CUSTID,// 证件号码，
                KEYTYPE: this.formData.KEYTYPE,// 证件类型
            };
            this.$post.common.transPort(defaultParaminfo).then((res) => {
                console.log(res);
                const tabledatas = JSON.parse(res.data.jsonRes);
                if (res.status === 200) { // 请求成功
                    console.log(tabledatas, '4081');
                    if (tabledatas.sysHead.rspCd == '000000') { // 交易成功
                        this.ContactsQueryOne = tabledatas.body.appBody;
                        if (Options === '3') {
                            this.$alert('正在操作联系人信息删除，是否确认？', '提示', {
                                customClass: 'success', type: 'success',
                            });
                            this.getContactInfo();
                        } else {
                            this.ContactsQueryOne.REL = (this.ContactsQueryOne.REL).trim();
                        }
                    } else {
                        const ErrorMessage = `错误码：${tabledatas.sysHead.rspCd} ` + `错误信息：${tabledatas.sysHead.rspMsg}`;
                        this.$alert(ErrorMessage, tabledatas.sysHead.busiName, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                }
            });
        },
        childHanderAllContaactInfoItem(val) {
            if (val) {
                this.getContactInfo();
            }
        },
        // 上下页切换
        handleChangePage(type) {
            if (type === 'pre') {
                // 切换到上一页
                if (this.currentPageIndex - 2 < 0) {
                    this.pagingDataList = []; // 清空缓存 申请编号 -> 相当于首次查询
                    this.NAME1 = '';
                    this.RTNIND = '';
                    this.TEL1 = '';
                    this.MOBILE1 = '';
                } else {
                    this.currentPageIndex = this.currentPageIndex - 2;
                    this.NAME1 = this.pagingDataList[this.currentPageIndex].NAME;
                    this.TEL1 = this.pagingDataList[this.currentPageIndex].TEL;
                    this.MOBILE1 = this.pagingDataList[this.currentPageIndex].MOBILE;
                }
                this.getContactInfo('1', this.NAME1, this.TEL1, this.MOBILE1);
            } else {
                // 切换到下一页
                this.getContactInfo('1', this.NAME1, this.TEL1, this.MOBILE1);
            }
        },

        handleClickbtn() {
            this.MenuId = getBusinessMenuId('/businessSystem/accountCardDetaileQuery', this.businessMenu);
            console.log('this.MenuId____', this.MenuId);
            this.$router.push({ name: 'accountCardDetaileQuery', path: '/businessSystem/accountCardDetaileQuery', params: { id: this.MenuId } });
        },
        // 关闭页面
        resetForm() {
            closePage(this.$route, this, 1);
        },
    },
};
</script>
<style lang="scss" scoped>
.AllContactInfoChecked {
    .tab-header {
        border-bottom: 1px solid #ccc;
    }
}
</style>
<style lang='scss'>
.AllContactInfoChecked {
    .el-card {
        border: none;
    }
    .el-card__header {
        padding: 8px !important;
    }
    .footer {
        text-align: center;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .content {
        width: 100%;
        margin-top: 10px;
    }
    .content_bottom {
        margin-top: 20px;
    }
    .box-group .content p {
        color: #000;
        font-size: 12px;
        text-align: left;
        span {
            text-align: right;
            display: inline-block;
            width: 54%;
            margin-right: 4px;
        }
    }
}
</style>
